<template>
  <!-- 首页 -->
  <!-- 自定义导航栏(动态获取胶囊按钮高度) -->
  <view class="navigation">
    <view class="nav-top"></view>
    <view class="nav-title">肥合市第一人民医院</view>
  </view>
  <!-- 心理测试 -->
  <view class="mentalTest">
    <image
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nav-yiyu.png"
      mode="aspectFill"
      @click="emoTest('抑郁测试专业版', 0, '001')"
    />
  </view>
  <!-- 疫苗预约 -->
  <view class="vaccine">
    <view
      v-for="(item, index) in vaccine"
      :key="index"
      @click="vaccineSkip(index)"
    >
      <image :src="item.image" mode="" />
      <text>{{ item.title }}</text>
    </view>
  </view>
  <!-- 挂号和体检 -->
  <view class="blockWrap pyhdata">
    <view
      v-for="(item, index) in pyhdata"
      :key="index"
      @click="pyhdataRoute(index)"
    >
      <view class="textgroup">
        <text class="pyhdata-title">{{ item.title }}</text>
        <text class="pyhdata-describe">{{ item.describe }}</text>
      </view>
      <image :src="item.image" mode="widthFix" />
    </view>
  </view>
  <!-- 热门挂号 -->
  <view class="registered blockWrap">
    <module-title
      :left="'热门挂号'"
      :right="true"
      path="/pages/registered/registered"
    ></module-title>
    <view class="registered-content">
      <view
        v-for="(item, index) in registered"
        :key="index"
        :style="{ backgroundColor: item.background }"
        @click="regRoute(item.dep_id)"
      >
        <text>{{ item.title }}</text>
        <image :src="item.image" mode="" />
      </view>
    </view>
  </view>
  <!-- 健康自测 -->
  <view class="blockWrap selftest" v-if="selftest.length > 0">
    <module-title :left="'健康自测'"></module-title>
    <view class="selftest-content">
      <view
        class="content-top"
        v-for="(item, index) in [selftest[0]]"
        :key="index"
        @click="emoTest(item.name, index, '001')"
      >
        <view class="top-text">
          <text class="top-title">{{ item.name }}</text>
          <text class="top-describe">{{ item.describe }}</text>
          <view class="test-record">
            <text class="test-num">{{ item.number_of_people }}</text>
            人测过 / {{ item.question }}题 / {{ item.minute }}分钟
          </view>
        </view>
        <image :src="item.image" mode="widthFix" />
      </view>
      <view class="content-bottom">
        <view
          v-for="(item, index) in selftest.slice(1)"
          :key="index"
          @click="emoTest(item.name, index, '002')"
        >
          <view class="top-text">
            <text class="top-title">{{ item.name }}</text>
            <text class="top-describe top-min">
              {{ item.question }}题 / {{ item.minute }}分钟
            </text>
            <view class="test-record">
              <text class="test-num">{{ item.number_of_people }}</text
              >人测过
            </view>
          </view>
          <image :src="item.image" mode="widthFix" />
        </view>
      </view>
    </view>
  </view>
  <!-- 骨架屏 -->
  <sk-index v-if="skeLeton" />
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
// import { useIndexStore } from "~/store";
import apiRequest from "~/api/index";
import moduleTitle from "~/components/moduleTitle/moduleTitle.vue";
import skIndex from "~/Skeleton/SK-index.vue";
let skeLeton = ref(true);
// 获取胶囊按钮的距离顶部高度
const menuBottom = reactive({
  menu_top: "",
  menu_height: "",
});
// 页面挂载的时候
onMounted(() => {
  let menuBottomInfo = uni.getStorageSync("MenuButton");
  menuBottom.menu_top = menuBottomInfo.top + "px";
  menuBottom.menu_height = menuBottomInfo.height + "px";
  FrontPageReq();
});

// 首页数据声明
let vaccine = ref([]); // 首页第一项数据：疫苗预约
let pyhdata = ref([]); // 首页第二项数据：疫苗预约
let registered = ref([]); // 首页第三项数据：热门挂号
let selftest = ref([]); // 首页第四项数据：健康自测

const FrontPageReq = async () => {
  // 请求首页数据
  const res = await apiRequest.FrontPage();
  vaccine.value = res.data[0].vaccine;
  pyhdata.value = res.data[1].reserve;
  registered.value = res.data[2].popular;
  selftest.value = res.data[3].self_test;
  skeLeton.value = false;
};

// 疫苗预约跳转相应页面
const vaccineSkip = (index) => {
  switch (index) {
    case 0:
      uni.navigateTo({ url: "/pages/vaccine-order/vaccine-order" });
      break;
    case 1:
      uni.navigateTo({ url: "/pages/hpv-vaccine/hpv-vaccine" });
      break;
    // 核酸检测
    case 2:
      uni.navigateTo({ url: "/pages/nucleic-acid/nucleic-acid" });
      break;
    // 图文咨询
    case 3:
      uni.navigateTo({ url: "/pages/IT_consult/IT_consult" });
      break;
  }
};

// 跳转至相应的心理测试页面
const emoTest = (name, i, type) => {
  if (type == "001") {
    uni.navigateTo({ url: `/pages/emotest/test-list?type=001&name=${name}` });
  } else {
    if (i == 0) {
      uni.navigateTo({ url: `/pages/emotest/test-list?type=002&name=${name}` });
    } else {
      uni.navigateTo({ url: `/pages/emotest/test-list?type=003&name=${name}` });
    }
  }
};

// 挂号与体验页面跳转
const pyhdataRoute = (index) => {
  if (index == 0) {
    uni.switchTab({
      url: "/pages/registered/registered",
    });
  } else if (index == 1) {
    // 体检预约
    uni.navigateTo({
      url: "/pages/Booking/Booking",
    });
  }
};

// 热门挂号
function regRoute(id) {
  uni.navigateTo({
    url: `/pages/doctor/doctor?id=${id}`
  })
}
</script>

<style scoped>
.blockWrap {
  padding: 10rpx;
}
.navigation {
  position: fixed;
  @apply top-0 left-0 right-0;
  z-index: 999;
}
.nav-top {
  height: v-bind("menuBottom.menu_top");
}
.nav-title {
  height: v-bind("menuBottom.menu_height");
  line-height: v-bind("menuBottom.menu_height");
  @apply text-xl font-semibold text-light-50;
  padding-left: 20rpx;
}
/* 心理测试 */
.mentalTest image {
  width: 100%;
  display: block;
  height: 550rpx;
}
/* 疫苗预约 */
.vaccine {
  @apply flex  w-full;
  margin: 20rpx 0;
  justify-content: space-around;
}
.vaccine image {
  width: 50rpx;
  height: 50rpx;
  padding-bottom: 20rpx;
}
.vaccine view {
  @apply flex flex-col;
  align-items: center;
}
.vaccine text {
  font-size: 28rpx;
}
/* 挂号和体验 */
.pyhdata {
  @apply flex text-light-50;
  justify-content: space-between;
  align-items: center;
}
.pyhdata > view {
  position: relative;
  height: 200rpx;
  width: 49%;
  border-radius: 20rpx;
}
.pyhdata > view > image {
  width: 150rpx;
  display: block;
  position: absolute;
  bottom: 0;
  right: 20rpx;
}
.pyhdata > view:nth-child(1) {
  background-image: linear-gradient(to right, #d7dfff 10%, #5a9fff 100%);
}
.pyhdata > view:nth-child(2) {
  background-image: linear-gradient(to right, #ffdbb4 10%, #ffc56b 100%);
}
.pyhdata .textgroup {
  @apply flex flex-col;
  margin: 20rpx 0 0 20rpx;
}
.pyhdata > view:nth-child(1) .pyhdata-title {
  @apply text-blue-600;
}
.pyhdata > view:nth-child(2) .pyhdata-title {
  @apply text-orange-400;
}
.pyhdata-title {
  font-size: 36rpx;
  margin-bottom: 10rpx;
}
.pyhdata-describe {
  font-size: 30rpx;
}
/* 热门挂号 */
.registered-title {
  @apply flex;
  justify-content: space-between;
  align-self: center;
}
.registered .title-left {
  font-size: 40rpx;
  font-weight: bold;
}
.registered .title-right {
  @apply flex;
  align-self: center;
  font-size: 30rpx;
}
.registered .title-right image {
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin-left: 10rpx;
}
.registered-content {
  @apply flex flex-wrap;
  justify-content: space-between;
}
.registered-content view {
  @apply flex;
  align-items: center;
  justify-content: space-between;
  width: calc(33% - 5rpx * 2);
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}
.registered-content image {
  width: 50rpx;
  height: 70rpx;
  display: block;
  /* margin-left: 10rpx; */
}
/* 健康自测 */
.selftest-content {
  margin-top: 20rpx;
}
.content-top {
  position: relative;
  height: 250rpx;
  overflow: hidden;
  border-radius: 20rpx;
  @apply bg-light-50;
}
.top-text {
  margin-left: 10rpx;
  @apply flex flex-col;
}
.content-top image {
  width: 250rpx;
  position: absolute;
  right: 0;
  bottom: 0;
}
.top-text .top-title {
  padding: 10rpx 0;
  font-size: 36rpx;
}
.top-text .top-describe {
  @apply text-gray-400;
}
.top-text .test-record {
  margin-top: 35rpx;
  @apply text-gray-400;
  font-size: 24rpx;
}
.test-record .test-num {
  font-size: 40rpx;
  @apply text-black;
}
.content-bottom {
  @apply flex;
  height: 250rpx;
  justify-content: space-between;
}
.content-bottom > view {
  width: calc(50% - 5rpx * 2);
  overflow: hidden;
  height: 250rpx;
  border-radius: 20rpx;
  position: relative;
  margin-top: 20rpx;
  @apply bg-light-50;
}
.content-bottom image {
  width: 170rpx;
  position: absolute;
  right: 0;
  bottom: 0;
}
.top-min {
  font-size: 26rpx;
}
</style>
